<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/register.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header></common-header>
	<section class="welcome">欢迎注册全国青少年电子信息智能创新大赛</section>
	<section class="register-content">
		<section class="steps">
			<section class="step-item" :class="setStepItemClass(1)">
				<section class="step-number">
					<span>1</span>
					<img class="icon" src="./images/icons/step-success-white.png" alt="">
				</section>
				选择身份
			</section>
			<section class="line"></section>
			<section class="step-item" :class="setStepItemClass(2)">
				<section class="step-number">
					<span>2</span>
					<img class="icon" src="./images/icons/step-success-white.png" alt="">
				</section>
				填写个人信息
			</section>
			<section class="line"></section>
			<section class="step-item" :class="setStepItemClass(3)">
				<section class="step-number">
					<span>3</span>
					<img class="icon" src="./images/icons/step-success-white.png" alt="">
				</section>
				设置密码
			</section>
			<section class="line"></section>
			<section class="step-item" :class="setStepItemClass(4)">
				<section class="step-number">
					<span>4</span>
					<img class="icon" src="./images/icons/step-success-white.png" alt="">
				</section>
				完成
			</section>
		</section>
		<section class="steps-content">
			<section v-show="currStep === 1" class="step-item step-one">
				<section class="type-list">
					<section class="type-item" :class="{active: currType === 2}" @click="chooseType(2)">
						<img src="./images/register-type1.png" alt="">
						<section>参赛选手</section>
					</section>
					<section class="type-item" :class="{active: currType === 3}" @click="chooseType(3)">
						<img src="./images/register-type2.png" alt="">
						<section>指导教师</section>
					</section>
					<section style="cursor: not-allowed" class="type-item" :class="{active: currType === 4}">
						<img src="./images/register-type3.png" alt="">
						<section>裁判</section>
					</section>
				</section>
			</section>
			<section v-show="currStep === 2" class="step-item step-two">
				<section class="title">填写个人信息</section>
				<section class="tips">注：以下信息全部必填</section>
				<form class="form layui-form" @submit.prevent>
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								姓名
							</span>
							<span class="full input-wrapper">
								<input autocomplete="off" lay-verify="required" lay-reqtext="请输入姓名" name="name" type="text" placeholder="请输入姓名">
							</span>
						</section>
					</section>
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								证件类型
							</span>
							<span class="input-wrapper layui-input-block">
								<select name="idCardType" id="idCardType" lay-verify="required" lay-filter="cardType" lay-reqtext="请选择证件类型">
									<option value="" disabled>请选择</option>
									<option value="0">身份证</option>
									<option value="1">护照</option>
								</select>
							</span>
						</section>
					</section>
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								{{ cardType === 'identity' ? '身份证号' : '护照号码' }}
							</span>
							<span class="full input-wrapper">
								<input autocomplete="off" name="idcard" :lay-verify="cardType" :lay-reqtext="'请输入正确的' + (cardType === 'identity' ? '身份证号' : '护照号码')" type="text"
								       :placeholder="'请输入正确的' + (cardType === 'identity' ? '身份证号' : '护照号码')">
							</span>
						</section>
					</section>
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								性别
							</span>
							<span class="input-wrapper">
<!--								<input autocomplete="off" type="text" placeholder="请选择">-->
								<select lay-verify="required" lay-reqtext="请选择性别"  name="gender">
									<option value=""></option>
									<option value="male">男</option>
									<option value="female">女</option>
								</select>
							</span>
						</section>
					</section>
					<template v-if="currType === 2">
						<section class="layui-form-item">
							<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								年级
							</span>
								<span class="input-wrapper">
								<select lay-verify="required" lay-reqtext="请选择年级" name="gradeName">
									<option value="">请选择年级</option>
									<option value="一年级">一年级</option>
									<option value="二年级">二年级</option><option value="三年级">三年级</option>
									<option value="四年级">四年级</option>
									<option value="五年级">五年级</option>
									<option value="六年级">六年级</option>
									<option value="初一">初一</option>
									<option value="初二">初二</option>
									<option value="初三">初三</option>
									<option value="高一">高一</option>
									<option value="高二">高二</option>
									<option value="高三">高三</option>
								</select>
							</span>
							</section>
						</section>
						<section class="layui-form-item">
							<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								所在学校
							</span>
								<span class="full input-wrapper">
								<input autocomplete="off" lay-verify="required" lay-reqtext="请填写学校名称" name="schoolName" type="text" placeholder="请输入学校">
							</span>
							</section>
						</section>
					</template>
					<template v-else>
						<section class="layui-form-item">
							<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								职务
							</span>
								<span class="input-wrapper">
									<input lay-verify="required" lay-reqtex="请输入职务" type="text" name="job" placeholder="请输入职务">
								</span>
							</section>
						</section>
						<section class="layui-form-item">
							<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								工作单位
							</span>
								<span class="full input-wrapper">
								<input autocomplete="off" name="workUnit" lay-verify="required" lay-reqtext="请填写工作单位" type="text" placeholder="请填写工作单位">
							</span>
							</section>
						</section>
					</template>
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								电子邮箱
							</span>
							<span class="full input-wrapper">
								<input autocomplete="off" name="email" lay-verify="email" lay-reqtext="请输入正确的邮箱" type="text" placeholder="请输入">
							</span>
						</section>
					</section>
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								通讯地址
							</span>
							<section class="input-wrapper address">
								<div class="layui-inline">
									<select name="province" id="province" lay-reqtext="请选择省份" lay-verify="required" lay-search lay-filter="province">
										<option value="">省份</option>
									</select>
								</div>
								<div class="layui-inline">
									<select name="city" id="city" lay-reqtext="请选择地级市" lay-verify="required" lay-search lay-filter="city">
										<option value="">地级市</option>
									</select>
								</div>
								<div class="layui-inline">
									<select name="district" id="district" lay-reqtext="请选择县/区" lay-verify="required" lay-search lay-filter="district">
										<option value="">县/区</option>
									</select>
								</div>
							</section>
						</section>
					</section>
					<section class="layui-form-item">
						<section class="label">
							<textarea lay-verify="required" lay-reqtext="请输入真实有效通讯地址" name="address" id="" cols="30" rows="10" placeholder="请输入真实有效通讯地址"></textarea>
						</section>
					</section>
					<template v-if="currType === 2">
						<section class="layui-form-item">
							<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								监护人姓名
							</span>
								<span class="full input-wrapper">
								<input autocomplete="off" name="guardianName" lay-verify="required" lay-reqtext="请输入监护人姓名" type="text" placeholder="请输入监护人姓名">
							</span>
							</section>
						</section>
						<section class="layui-form-item">
							<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								监护人手机号
							</span>
								<span class="full input-wrapper">
								<input autocomplete="off" name="guardianPhone" lay-verify="phone" lay-reqtext="请输入正确的手机号码" type="text" placeholder="请输入监护人手机号">
							</span>
							</section>
						</section>
					</template>
					<button ref="userInfoForm" style="display: none" type="submit" lay-submit="" lay-filter="nextStep"></button>
				</form>
			</section>
			<section v-show="currStep === 3" class="step-item step-third">
				<form class="form layui-form" @submit.prevent>
					<!--<section class="layui-form-item">-->
						<!--<section class="label">-->
							<!--<span class="label-text">-->
								<!--<span class="required">*</span>-->
								<!--昵称-->
							<!--</span>-->
							<!--<span class="full input-wrapper">-->
								<!--<input autocomplete="off" lay-verify="required" lay-reqtext="请输入账号昵称" name="nickName" type="text" placeholder="请输入昵称">-->
							<!--</span>-->
						<!--</section>-->
					<!--</section>-->
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								手机号
							</span>
							<span class="full input-wrapper layui-input-block">
								<input lay-verify="phone" autocomplete="off" name="phone" type="text" placeholder="请输入11位手机号">
							</span>
						</section>
					</section>
					<section class="layui-form-item">
						<label class="label code-label">
							<span class="label-text">
								<span class="required">*</span>
								验证码
							</span>
							<span class="input-wrapper">
								<input autocomplete="off" name="vcode" lay-verify="required" lay-reqtext="请输入验证码" type="text" placeholder="请输入验证码">
								<span class="get-code" @click="getCode(null)">{{ seconds ? seconds + 's' : '获取验证码'}}</span>
							</span>
						</label>
					</section>
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								密码
							</span>
							<span class="full input-wrapper">
<!--								<input autocomplete="off" type="text" placeholder="请选择">-->
								<input autocomplete="off" lay-verify="password" name="passWord" type="password" placeholder="8-16字母、数字、符号">
							</span>
						</section>
					</section>
					<section class="layui-form-item">
						<section class="label">
							<span class="label-text">
								<span class="required">*</span>
								确认密码
							</span>
							<span class="full input-wrapper">
								<input autocomplete="off" name="confirmPassword" lay-verify="confirmPassword" type="password" placeholder="8-16字母、数字、符号">
							</span>
						</section>
					</section>
					<section class="layui-form-item">
						<label class="read-label" @click="isRead = !isRead">
							<span class="is-read">
								<img v-show="isRead" src="./images/icons/step-success-icon.png" alt="">
							</span>
							<span>
								请认真阅读<a href="javascript:;" @click.stop="showModal = true">《中国电子学会注册协议》</a>，我已阅读并同意
							</span>
						</label>
					</section>
					<button ref="registerForm" style="display: none" type="submit" lay-submit="" lay-filter="register"></button>
				</form>
			</section>
			<section v-show="currStep === 4" class="step-item step-success">
				<img src="./images/icons/success.png" alt="">
				<section class="title">注册成功</section>
				<a class="login" href="./login.html">立即登录</a>
				<a class="back" href="./index.html">{{ seconds }}s返回首页</a>
			</section>
			<section class="step-btn">
				<a v-if="currStep > 1 && currStep <= 3" class="btn prev-btn" href="javascript:;" @click="prev">上一步</a>
				<a v-if="currStep <= 3" class="btn" href="javascript:;" @click="next">{{ currStep === 3 ? '确认注册' : '下一步' }}</a>
			</section>
		</section>
	</section>
	<common-modal
		:visible.sync="showModal"
		:show-close="false"
		class="register-modal"
		title="中国电子学会注册协议"
	>
		<section class="desc">请仔细认真阅读到最后一页再退出</section>
		<section class="text">
			<iframe style="display: block; width: 100%; height: 1650px; overflow-y: scroll" src="./agreement.html" frameborder="0"></iframe>
			<img style="display: block;margin: 20px auto" @click="showModal = false" src="./images/icons/close-icon.png" alt="">
		</section>
	</common-modal>
	<section class="footer">版权所有62016中国电子学会普及工作委员会京JCP备120-41980号</section>
</section>
<script src="./js/jquery.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./components/areaList.js"></script>
<script src="./components/index.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/ext/reg.js"></script>
<script src="../js/abkj/ext/vode.js"></script>
<script src="../js/abkj/ext/login.js"></script>
<script src="./js/common.js"></script>
<script src="../js/components.js"></script>
<script>
	function checkPassport(code){
    var tip = "OK";
    var pass= true;

    if(!code || !/^((1[45]\d{7})|(G\d{8})|(P\d{7})|(S\d{7,8}))?$/.test(code)){
        tip = "护照号码格式错误";
        pass = false;
    }
    return pass;
}
	$(function () {
		var vm = new Vue({
			el: '.wrapper',
			data: {
				currType: 2,
				currStep: 1,
				cardType: 'identity',
				isRead: false,
				form: null,
				seconds: 0,
				timer: null,
				showModal: false,
				registerData: {}
			},
			mounted: function () {
				var vm = this
				// this.$refs.form.onsubmit = function () { return false}
				layui.use(['form', 'layer'], function () {
					vm.form = layui.form
					vm.layer = layer
					var form = vm.form
					vm.form.verify({
						//我们既支持上述函数式的方式，也支持下述数组的形式
						//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
						password: function (val) {
							if (!/[^\u4e00-\u9fa5]/.test(val)) return '密码必须是8-16位字母、数字、符号的组合'
							if (val.length < 8) return '密码必须是8-16位字母、数字、符号的组合'
						},
						passport: function (val) {
							if (!val.trim()) {
								return '请输入护照号码'
							}
						},
						confirmPassword: function (value) {
							if (value !== $('[name=passWord]').val()) return '两次密码不一致'
						}
					})
					vm.form.on('select(cardType)', function (data) {
						if (data.value === '0') vm.cardType = 'identity'
						else vm.cardType = 'passport'
					})

					vm.form.on('submit(nextStep)', function (data) {
						vm.registerData = $.extend(vm.registerData, data.field)
						if (document.getElementById("idCardType").value=='0'||document.getElementById("idCardType").value==0){
							checkIdCard({name: vm.registerData.name, idcard: vm.registerData.idcard}, function () {
							vm.currStep++
						}, function () {

						})
						}
						else {
							
								vm.currStep++
						
						}
					
					})
					vm.form.on('submit(register)', function (data) {
						if (!vm.isRead) return vm.layer.msg('请确认已阅读注册协议', {icon: 5})
						vm.registerData = $.extend(vm.registerData, data.field)
						vm.registerData.roleId = vm.currType
						vm.registerData.address = vm.registerData.province + '/' + vm.registerData.city + '/' + vm.registerData.district + '/' + vm.registerData.address
						delete vm.registerData.province
						delete vm.registerData.city
						delete vm.registerData.district
						delete vm.registerData.confirmPassword
						// var data = {
						// 	prjName: 'MATCH',
						// 	'name': '李一鸣',
						// 	'idCardType': '0',
						// 	'idcard': '41302619970929301X',
						// 	'gender': 'male',
						// 	'address': '上海/县/崇明县/哈哈大楼',
						// 	'gradeName': '一年级',
						// 	'schoolName': '清华',
						// 	'email': '1948935076@qq.com',
						// 	'guardianName': '陈奕迅',
						// 	'guardianPhone': '18339284935',
						// 	'nickName': '周杰伦',
						// 	'phone': '18539470263',
						// 	'vcode': '688598',
						// 	'passWord': '123123123',
						// 	'roleId': 2
						// }
						checkPhone(vm.registerData.phone, function () {
							addUser(vm.registerData, function (data) {
								console.log(data)
								vm.currStep++
								vm.getCode(function () {
									location.href = './login.html'
								}, 5)
							}, function (err) {
								console.log(err)
							})
						}, function () {})

					})
					var province = $('#province'),
						city = $('#city'),
						district = $('#district')
					//初始将省份数据赋予
					for (var i = 0; i < provinceList.length; i++) {
						addEle(province, provinceList[i].name)
					}

					//赋予完成 重新渲染select
					form.render('select')

					//向select中 追加内容
					function addEle(ele, value) {
						var optionStr = ''
						optionStr = '<option value=' + value + ' >' + value + '</option>'
						ele.append(optionStr)
					}

					//移除select中所有项 赋予初始值
					function removeEle(ele) {
						ele.find('option').remove()
						var optionStar = '<option value=' + '0' + '>' + '请选择' + '</option>'
						ele.append(optionStar)
					}

					var provinceText,
						cityText,
						cityItem

					//选定省份后 将该省份的数据读取追加上
					form.on('select(province)', function (data) {
						$(data.elem).parent().attr('title', data.value)
						provinceText = data.value
						$.each(provinceList, function (i, item) {
							if (provinceText === item.name) {
								cityItem = i
								return cityItem
							}
						})
						removeEle(city)
						removeEle(district)
						$.each(provinceList[cityItem].cityList, function (i, item) {
							addEle(city, item.name)
						})
						//重新渲染select
						form.render('select')
					})

					////选定市或直辖县后 将对应的数据读取追加上
					form.on('select(city)', function (data) {
						cityText = data.value
						$(data.elem).parent().attr('title', data.value)
						removeEle(district)
						$.each(provinceList, function (i, item) {
							if (provinceText === item.name) {
								cityItem = i
								return cityItem
							}
						})
						$.each(provinceList[cityItem].cityList, function (i, item) {
							if (cityText === item.name) {
								for (var n = 0; n < item.areaList.length; n++) {
									addEle(district, item.areaList[n])
								}
							}
						})
						//重新渲染select
						form.render('select')
					})
					form.on('select(district)', function (data) {
						$(data.elem).parent().attr('title', data.value)
					})

				})
			},
			watch: {
				currStep: function (val) { //监听步骤变化， layui form 重新渲染
					vm.form.render()
				}
			},
			methods: {
				chooseType: function (type) {
					this.currType = type
				},
				prev: function () {
					this.currStep--
				},
				next: function () {
					var vm = this
					if (this.currStep === 2) {
						this.$refs.userInfoForm.click()
					} else if (this.currStep === 3) {
						this.$refs.registerForm.click()
					} else {
						vm.currStep++
					}
				},
				getCode: function (callback, seconds) {
					var phone = $('[name=phone]').val()
					console.log(phone)
					if (phone.length==0) return layer.msg('请输入正确的手机号', {icon: 5})
					if (this.timer) return
					var vm = this
					this.seconds = seconds || 60
					if (callback) {
						vm.timer = setInterval(function () {
							vm.seconds--
							if (vm.seconds === 0) {
								clearInterval(vm.timer)
								vm.timer = null
								callback && callback()
							}
						}, 1000)
					} else {
						getSMSVCode(phone, function (data) {
							vm.timer = setInterval(function () {
								vm.seconds--
								if (vm.seconds === 0) {
									clearInterval(vm.timer)
									vm.timer = null
								}
							}, 1000)
						}, function (data) {

						})
					}
				},
				setStepItemClass(type) {
					if (type > this.currStep) return ''
					else if (type === this.currStep) return 'active'
					else return 'success'
				}
			}
		})
	})
</script>
</body>
</html>
